﻿<h3 class="important-tittle">Basics</h3>

<p>
    LiveCharts is designed to be easy for the user, everything is updated and animated
    automatically, the library will only update when it considers it is necessary, not every time your data changes,
    when you add/remove series, or add/remove values the chart will update by itself, you really don’t need
    to worry about anything but your business, let LiveCharts handle the charting.
</p>

<h4>Starting Example</h4>

<p>
    There are many types ready to plot already defined, you can learn more in the
    <a href="/App/examples/v1/uwp/Types%20and%20Configuration">Types and Configuration section</a>, in 
    this brief example we are plotting double values.
</p>

<h4>Code Behind</h4>

<pre class="prettyprint">SeriesCollection = new SeriesCollection
{
    new LineSeries
    {
        Values = new ChartValues&lt;double> { 3, 5, 7, 4 }
    },
    new BarSeries                
    {
        Values = new ChartValues&lt;decimal> { 5, 6, 2, 7 }
    }
};</pre>

<h4>XAML</h4>

<pre class="prettyprint">&lt;lvc:CartesianChart Series="{Binding SeriesCollection}" /></pre>

<p>
    Simple isn't it? that is all you need, now every time you add/remove a series to the SeriesCollection instance or add/remove a value at every series, the chart will update and animate automatically.
</p>

<h4>Components</h4>

<p>
    The next image will guide you to get more familiar with LiveCharts components.
</p>

<div class="text-center">
    <img src="/App/Examples/v1/Basics/Images/components.png"/>
</div>

<p>
    All the series have a <i>Stroke</i> and <i>Fill</i> properties.
</p>

<div class="text-center">
    <img src="/App/Examples/v1/Basics/Images/strokeandfill.png" />
</div>

<p>
    You can set a Fill and Stroke only for a specific series, if you don't then the library will decide a color according to your theme
</p>

<pre class="prettyprint">&lt;lvc:LineSeries Stroke="Red" Fill="Blue /"&gt;</pre>

<pre class="prettyprint">mySeries.Stroke = System.Windows.Media.Brushes.Red;
mySeries.Fill = System.Windows.Media.Brushes.Blue;</pre>

<p>
    Also setting the <i>Series.Visibility</i> (will define the drawn shape visibility), 
    <i>Panel.ZIndex</i> (drawn shape z-index property), <i>Series.StrokeDashArray</i> (dashed strokes) properties
    will be binded to the drawn shape, for example:
</p>

<pre class="prettyprint">&lt;lvc:LineSeries Visibility="Hidden" StrokeDashArray="2" Panel.Zindex="3" / &gt;</pre>

<p>
    Or from code behind
</p>

<pre class="prettyprint">mySeries.Visibility = System.Windows.Visibility.Hidden;
mySeries.StrokeDashArray = new System.Windows.Media.DoubleCollection {2};
System.Windows.Controls.Panel.SetZIndex(mySeries, 3);</pre>

<h4>Custom Components</h4>

<p>
    If necessary you can also define your own tooltips or legends controls,
    <a href="/App/examples/v1/uwp/Customizing Tooltips">here</a> is an article about it
</p>

<h4>Legends</h4>

<p>
    You can place a legend at Bottom, Top, Right or Left, just set the <i>Chart.LegendPosition</i> property at the desired location.
</p>

<pre class="prettyprint">myChart.LegendLocation = LegendLocation.Right;</pre>
